<template lang='pug'>
.popView(ref='popview')
    .pop_title {{inf.scale}}--view
</template>
<script>
let Cesium = require('cesium/Cesium');
export default {
    name: 'pop1',
    data() {
        return {
            viewer:null,
            Cesium:null,
            pos:new Cesium.Cartesian3.fromDegrees(110.20, 34.55, 1)
        }
    },
    computed:{
    },
    props: {
        inf: {type:Object}
    },
    watch: {
        inf: {
            handler(){
                let llh=this.inf.llh
                this.pos=new Cesium.Cartesian3.fromDegrees(llh.lon,llh.lat,llh.hei)
                this.load()
            }
        },
        deep: true,
        immediate:true
    },
    mounted () {
        let t=this
        t.$nextTick(()=>{
            t.viewer=t.$parent.viewer
            t.Cesium=t.$parent.Cesium
            t.viewer.clock.onTick.addEventListener(function(clock) {
                t.load();
            })
        })

    },
    methods:{
        load() {
            let t=this
            let {Cesium,viewer} =this
            if(!Cesium || !viewer)return
            var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,this.pos)
            if(!position || isNaN(position.x) || isNaN(position.y))return
            this.$refs.popview.style.left=(position.x-this.$refs.popview.offsetWidth/2)+'px'
            this.$refs.popview.style.top=(position.y-this.$refs.popview.offsetHeight - 10)+'px'
        }
    }

}
</script>
<style lang="scss" scoped>
.popView{
    z-index: 999;
    position:absolute;
    background: white;
}
</style>